<!-- 价签打印 -->
<template>
  <div class="mod-config">
    <div style="margin-bottom: 5px;">
      <el-button @click="addBrand">添加品牌</el-button>
      <el-button @click="batPrintGoodsBarCode">打印条码</el-button>
      <el-button @click="delTableData">删除</el-button>
    </div>
    <div class="avue-crud">
      <el-table ref="table" border :data="dataList" v-loading="dataListLoading"
        @selection-change="handleSelectionChange">
        <el-table-column key="1" type="selection" width="40"></el-table-column>
        <el-table-column key="2" prop="brandCode" label="品种代码" min-width="180"></el-table-column>
        <el-table-column key="3" prop="name" label="品种" min-width="180"></el-table-column>
        <el-table-column key="4" prop="ctgName" label="商品类别" min-width="100"></el-table-column>
        <el-table-column key="5" label="零售价范围" min-width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.retailprice" :ref="'retailprice' + scope.$index"></el-input>
          </template>
        </el-table-column>
        <el-table-column key="6" label="打印数量" min-width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.quantity" :ref="'quantity' + scope.$index"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗，添加商品 -->
    <search-brand v-if="goodsVisible" ref="goodsDialog" @updateForm="getBrandData"></search-brand>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { checkPrintNumber, checkPrintPrices, printTag } from '@/util/print'

  import SearchBrand from '../components/SearchBrand'

  export default {
    data() {
      return {
        goodsVisible: false,
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        selectionList: [],
      }
    },
    components: {
      SearchBrand
    },
    computed: {
      ...mapGetters(['permissions', 'bizData','userInfo'])
    },
    methods: {
      handleSelectionChange(val) {
        this.selectionList = val
      },
      // 添加品牌
      addBrand(){
        this.goodsVisible = true
        this.$nextTick(() => {
          this.$refs.goodsDialog.init(this.dataList)
        })
      },
      // 获取品种数据
      getBrandData(row){
        this.dataList = [...row]
      },
      // 删除表格商品数据
      delTableData(){
        this.selectionList.forEach((item,index) => {
          for(let i = 0; i < this.dataList.length; i++){
            if(this.dataList[i].goodsId == item.goodsId && this.dataList[i].batch == item.batch && this.dataList[i].invalidTime == item.invalidTime){
              this.dataList.splice(i,1)
            }
          }
        })
        this.selectionList = []
      },
      // 价签打印数据组装
      batPrintGoodsBarCode(){
        let that = this
        if(checkPrintPrices(that)){
          if(checkPrintNumber(that)){
            this.$confirm('条码打印确认！','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'}).then(() => {printTag(that)})
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
    // order: 1;
    z-index: 2;
  }

  .bg-row {
    padding-left: 5px;
    padding-top: 5px;
  }

  /deep/ .el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 0;
  }
</style>
